<template>
  <div>
    <nav-bar>
      <div slot="center">分类</div>
    </nav-bar>
    <div class="wrapper" ref="cate">
      <ul class="content">
          <li>01</li>
          <li>02</li>
          <li>03</li>
          <li>04</li>
          <li>05</li>
          <li>06</li>
          <li>07</li>
          <li>08</li>
          <li>09</li>
          <li>10</li>
          <li>11</li>
          <li>12</li>
          <li>13</li>
          <li>14</li>
          <li>15</li>
          <li>16</li>
          <li>17</li>
          <li>18</li>
          <li>19</li>
          <li>20</li>
          <li>21</li>
          <li>22</li>
          <li>23</li>
          <li>24</li>
          <li>25</li>
          <li>26</li>
          <li>27</li>
          <li>28</li>
          <li>29</li>
          <li>30</li>
          <li>31</li>
          <li>32</li>
          <li>33</li>
          <li>34</li>
          <li>35</li>
          <li>36</li>
          <li>37</li>
          <li>38</li>
          <li>39</li>
          <li>40</li>
          <li>41</li>
          <li>42</li>
          <li>43</li>
          <li>44</li>
          <li>45</li>
          <li>46</li>
          <li>47</li>
          <li>48</li>
          <li>49</li>
          <li>50</li>
      </ul>
    </div>
    
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
import BScroll from 'better-scroll'

export default {
  components: { NavBar },
  name: 'category',
  // better-scroll 模板挂载后使用
  mounted() {
    // 局部滑动的实现(设置还有弹簧效果)
    // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素
    this.scroll = new BScroll(document.querySelector('.wrapper'), {})
  },
  data() {
    return {
      scroll: null
    }
  }
}
</script>

<style scoped>
/* @import url(); 引入css类 */
.wrapper {
  height: 150px;
  background-color: aqua;
  overflow: hidden;
}
</style>
